class Enlarge
{
    constructor(el,options = {maskBg: 'pink'})
    {
        // 1. 保存全局信息
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.ulliobj = this.el.querySelectorAll('ul li')
        this.options = options
        // 2. 默认调用
        this.init()
    }
    
    init() {
        // 功能1
        // 功能2
        // 功能3
        // ....
        // 功能n
        
        this.maskcolor()
        this.overOut()
        this.enlargeSetWH()
        this.maskMove()
        // this.enlargeSetBg()
        this.smallImgChange()
    }
    
    smallImgChange(){
        this.ulliobj.forEach((item,i)=>{
            item.onclick = ()=>{
                this.el.querySelector('ul li.active').className = ''
                item.className = 'active'
                this.imgObj.style.background = `url(./imgs/${i+1}.jpg)`
                this.enlargeObj.style.backgroundImage = `url(./imgs/${i+1}.big.jpg)`
            }
          })
    }
    maskcolor(){
        this.maskObj.style.background = this.options.maskBg
    }
    //获取遮盖框位置
    maskMove(){
        this.imgObj.onmousemove = (evt)=>{
            let e = evt || window.event
            let left = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth/2
            let top = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight/2
            if(left<0) left = 0
            if(top<0) top = 0
            let maxleft = this.imgObj.clientWidth - this.maskObj.offsetWidth
            let maxtop = this.imgObj.clientHeight - this.maskObj.offsetHeight
            if(left>maxleft) left = maxleft
            if(top>maxtop) top = maxtop

            this.maskObj.style.left = left +'px'
            this.maskObj.style.top = top +'px'
            this.enlargeSetBg(left,top)
        }
    }

    // 背景同步
    enlargeSetBg(left, top){
         // 右侧背景移动x  = mask left * （右侧大图/左侧图）
         let enlargeBgSize = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')
        
        let enlargeBgW = parseInt( enlargeBgSize[0])
        let enlargeBgH = parseInt( enlargeBgSize[1])

        let imgw = parseInt(this.getStyle(this.imgObj,'width'))
        let imgh = parseInt(this.getStyle(this.imgObj,'height'))
       
        let x = left * (enlargeBgW/imgw)
        let y = top * (enlargeBgH/imgh)
        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
    }

    //获取样式
    getStyle(tagObj, cssAttr)
    {
        return window.getComputedStyle ? window.getComputedStyle(tagObj)[cssAttr] : tagObj.currentStyle[cssAttr] // 当对象的键是变量时用数组语法
    }

    enlargeSetWH(){
        //  div.enlarge w = div.mask w * (div.enlarge background / div.img background )
        let maskw = parseInt(this.getStyle(this.maskObj,'width'))
        let maskh = parseInt(this.getStyle(this.maskObj,'height'))
        

        let enlargeBgSize = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')
        let enlargeBgW = parseInt( enlargeBgSize[0])
        let enlargeBgH = parseInt( enlargeBgSize[1])


        let imgw = parseInt(this.getStyle(this.imgObj,'width'))
        let imgh = parseInt(this.getStyle(this.imgObj,'height'))

        let w = maskw * (enlargeBgW/imgw)
        let h = maskh * (enlargeBgH/imgh)

        this.enlargeObj.style.width = w +'px'
        this.enlargeObj.style.height = h +'px'
        
    }
    overOut(){
        this.imgObj.onmouseover = ()=>{
            this.maskObj.style.display = this.enlargeObj.style.display = 'block'
            
        }
        this.imgObj.onmouseout = ()=>{
            this.maskObj.style.display = this.enlargeObj.style.display = 'none'
        }
    }
}
